import { Cascader, Button, Space, Toast, SearchBar } from 'antd-mobile'
import router from 'next/router'
import styles from './style.module.scss'

import { options } from '../../assets/college/data'
import { useState } from 'react'
interface Props {
  page: string
  send: (v: string) => void
}

export default function Search({ page, send }: Props) {
  
  return (
    <div className='Cascader'>
      <header className={styles.header}>
        <SearchBar
          onFocus={() => {
            page === 'index' && router.push({ pathname: '/search' })
          }}
          placeholder='搜索书名、作者、分类、ISBN'
          style={{
            '--border-radius': '5px',
            '--background': '#f7f7f7',
          }}
          onSearch={v => send(v)}
          maxLength={page === 'index' ? 0 : 20}
        />
        <i className='iconfont icon-fenlei1'
          onClick={async () => {
            const value = await Cascader.prompt({
              options,
              title: '选择书籍所属学院/专业',
            })
            if (value) {
              router.push({ pathname: '/search', query: { major: value } })
              send('')
            }
          }}>
        </i>
      </header>
    </div >
  )
}

